<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.2.1.min.js"></script>
    <script>
        $(function () {
            $.ajaxSetup({
               async:false
            });
           $.post("/dept/findAll",null,function (info) {
               let str = "";
               for(let i=0; i<info.length;i++){
                   str += `<option value="${info[i].id}">${info[i].name}</option>`;
               }
               $("#deptSelect").html(str);
           });
            $.ajaxSetup({
                async:true
            });
            changeDept();
        });

        function changeDept() {
            $.post("/employee/findByDept","deptId="+$("#deptSelect").val(),function (info) {
                let str = "";
                for(let i=0; i<info.length;i++){
                    str += `<option value="${info[i].id}">${info[i].name}</option>`;
                }
                $("#employeeSelect").html(str);
            })
        }
    </script>
</head>
<body>
    <select id="deptSelect" onchange="changeDept()"></select>
    <select id="employeeSelect"></select>
</body>
</html>